<template>
  <div class="app-container">
    <!-- 搜索 -->
    <div class="search">
      <!-- 选择年份 -->
      <el-form :inline="true" :model="formInline">
        <el-form-item>
<!--          <el-input v-model="formInline.year" size="mini" placeholder="请选择年份" />-->
          <el-date-picker
            v-model="formInline.year"
            type="year"
            size="mini"
            value-format="yyyy"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- tab页面 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="代办日历" name="first">
        <Calendar
          :date="formInline.year"
        ></Calendar>
      </el-tab-pane>
      <el-tab-pane label="代办列表" name="second">
        <TodoList/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Calendar from './components/calendar.vue'
import TodoList from './components/todoList.vue'

export default {
  name: 'index',
  components: {
    Calendar,
    TodoList
  },
  data() {
    return {
      formInline: {
        year: '',
      },
      date: '',
      activeName: 'first', // 选项卡下标
    }
  },
  created() {
    this.formInline.year = this.getDay(0)
  },
  methods: {
    handleClick() {

    },
    /**
     * @description: 获取当前日期
     * @author: hst
     * @param: day: 0今天，-1昨天
     */
    getDay(day) {
      var today = new Date()
      var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday)
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth(month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-tabs__nav-scroll{
    float: right;
  }
/*.top{*/
/*  display: flex;*/
/*  flex-direction: row;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  padding: 0 16px;*/
/*  box-sizing: border-box;*/
/*}*/
.search{
  position: absolute;
  left: 20px;
  top: 104px;
  width: 500px;
  height: 40px;
  z-index: 99;
}
</style>
